<template>
  <div class="detail">
    <h3 style="text-align: center">{{ Forum.title }}</h3>
    <br />
    <h5 style="text-align: center; font-weight: 400; font-size: 10px">
      {{ new Date(Forum.createTime).toLocaleString() }}
    </h5>
    <br />
    <p>{{ Forum.content }}</p>
    <br />
    <el-row>
      <el-col :span="8">
        <el-tooltip content="阅读量" placement="top" effect="light">
          <span
            ><el-icon><View /></el-icon> {{ Forum.clicknum }}</span
          >
        </el-tooltip>
        <el-tooltip content="评论量" placement="top" effect="light">
          <span
            ><el-icon><ChatDotSquare /></el-icon> {{ Forum.commenton }}</span
          ></el-tooltip
        >
      </el-col>
      <el-col :span="8"></el-col>
      <el-col :span="8">
        <span>{{ user.name }}</span>
        <span>{{
          new Date(Forum.createTime).toLocaleDateString()
        }}</span></el-col
      >
    </el-row>
    <el-divider />
    <el-row>
      <el-col :span="1"></el-col>
      <el-col :span="1">
        <div>
          <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          /></div
      ></el-col>
      <el-col :span="0.5"></el-col>
      <el-col :span="21">
        <el-form :model="form">
          <el-form-item v-if="!isLogin">
            <el-input v-model="form.user" placeholder="请输入昵称" />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.textarea"
              maxlength="40"
              placeholder="请输入评论，不超过40个字"
              show-word-limit
              type="textarea"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="saveforumcomment()"
              >发送</el-button
            >
            <el-button size="small">取消</el-button>
            <el-button type="primary" size="small" plain @click="toback()"
              >返回论坛</el-button
            >
          </el-form-item></el-form
        ></el-col
      >
    </el-row>
    <el-divider />
    <h4>
      全部评论<span>{{ total }}</span>
    </h4>
    <br />
    <div v-for="item in forumcomment" :key="item.id">
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="1">
          <div>
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            /></div
        ></el-col>
        <el-col :span="0.5"></el-col>
        <el-col :span="21">
          <h5>
            {{ item.commentator }}
            <span>{{ new Date(item.createTime).toLocaleString() }}</span>
          </h5>
          <h6>{{ item.commentbody }}</h6>
        </el-col>
      </el-row>
      <br />
      <div v-if="item.replybody">
        <el-row>
          <el-col :span="2"></el-col>
          <el-col :span="1">
            <el-badge value="作者" class="item">
              <el-button circle
                ><img
                  class="author"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  alt=""
              /></el-button>
            </el-badge>
          </el-col>
          <el-col :span="0.5"></el-col>
          <el-col :span="18">
            <h6>
              回复 :<span>{{ item.replybody }}</span
              ><span class="backtext">{{
                new Date(item.updateTime).toLocaleString()
              }}</span>
            </h6>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--分页-->
    <div style="padding: 10px 20px; margin-left: 30px">
      <el-pagination
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="pageNum"
        :page-sizes="[15, 30, 50]"
        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
export default {
  name: 'Forumcenterdetail',
  data() {
    return {
      total: 0, //数据总条数
      pageNum: 1, //当前页
      pageSize: 10, //页大小
      form: {},
      id: null,
      Forum: [],
      user: [],
      forumcomment: [],
      isLogin: !!localStorage.getItem('token'),
    };
  },
  methods: {
    handleSizeChange(val) {
      //页大小改变
      this.pageSize = val;
      this.getforumcomment();
    },
    handleCurrentChange(val) {
      //当前页改变
      this.pageNum = val;
      this.getforumcomment();
    },
    getforumDate() {
      this.$http.get('/inoculations/forum/get/' + this.id).then((res) => {
        if (res.statusCode == '200') {
          console.log(res.data);
          this.Forum = res.data;
          this.user = res.data.user;
        }
      });
    },
    getforumcomment() {
      this.$http
        .get('/inoculations/forumcomment/pageall', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            forumid: this.id,
          },
        })
        .then((res) => {
          if (res.statusCode == '200') {
            this.total = res.data.total;
            this.forumcomment = res.data.records;
            console.log(res.data.records);
          }
        })
        .catch(() => {
          ElMessage.error('数据加载失败,请刷新！');
        });
    },

    toback() {
      this.$router.go(-1);
    },
    //发送评论
    saveforumcomment() {
      if (this.isLogin) {
        this.$http
          .post('/inoculations/forumcomment/save', {
            forumid: this.id,
            commentbody: this.form.textarea,
          })
          .then((res) => {
            if (res.statusCode == '200') {
              ElMessage({
                message: '成功！',
                type: 'success',
              });
              this.getforumcomment();
              this.form = {};
            } else {
              ElMessage.error('修改失败！');
            }
          })
          .catch(() => {
            ElMessage.error('失败！');
          });
      } else {
        this.$http
          .post('/inoculations/forumcomment/save', {
            forumid: this.id,
            commentator: this.form.user,
            commentbody: this.form.textarea,
          })
          .then((res) => {
            if (res.statusCode == '200') {
              ElMessage({
                message: '成功！',
                type: 'success',
              });
              this.getforumcomment();
              this.form = {};
            } else {
              ElMessage.error('修改失败！');
            }
          })
          .catch(() => {
            ElMessage.error('失败！');
          });
      }
    },
  },
  created() {
    this.id = this.$route.query.forumid;
    this.getforumDate();
    this.getforumcomment();
  },
};
</script>

<style scoped>
.detail {
  /*左对齐*/
  margin: 58px;
  margin-top: 88px;
  padding: 15px;
  box-shadow: 7px 15px 40px #dfe3e3;
  background-color: #fff;
  border-radius: 10px;
}
p {
  text-indent: 2em;
  font-size: 16px;
  line-height: 28px;
}
span {
  margin-right: 22px;
  font-size: 14px;
  color: #666;
}
.author {
  width: 30px;
  height: 40px;
}
h4 {
  font-weight: 400;
  margin-left: 5px;
}
h4 span {
  color: #ff6347;
  margin-left: 30px;
}
h5 {
  font-weight: 600;
  line-height: 40px;
  margin-left: 20px;
}
h5 span {
  font-size: 12px;
  font-weight: 400;
  margin-left: 20px;
}
h6 {
  font-weight: 400;
  font-size: 14px;
  line-height: 40px;
  margin-left: 20px;
}
.backtext {
  font-size: 12px;
  line-height: 40px;
  margin-left: 50px;
}
</style>
